<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username">
    <input type="file" id="avatar">
    <button id="btn">点击</button>
    <script>
        let file;
        avatar.addEventListener('change', e => {
            file = e.target.files[0]
        })
        btn.addEventListener('click', () => {
            let name = username.value;
            avatar.value = '';
            let fd = new FormData();
            fd.append('username', name);
            fd.append('avter', file);
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'json';
            xhr.open('POST', 'http://localhost:3000/login', true);
            xhr.onload = function () {
                let img = new Image()
                img.src = '/upload' + xhr.response.avatar.filename;
                document.body.appendChild(img)
            }
            xhr.send(fd);
        })
    </script>
</body>

</html>